vue用dragstart实现拖拽

2024-07-12 14:45| 来源: 网络整理| 查看: 265

下面是HTML5的拖拽事件

dragstart：开始拖元素触发，作用于拖拽元素 dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素 dragover：当元素拖动到drop元素上时触发，作用于目标元素 drop：当元素放下到drop元素触发，作用于目标元素 dragleave ：当元素离开drop元素时触发，作用于目标元素 drag：每次元素被拖动时会触发，作用于目标元素 dragend：放开拖动元素时触发，作用于目标元素

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

{{item.name}} {{item.brief}} const hotteams = [ { id:11, name: '团队1', brief: '团队可以是一帮人、 imgUrl: 'https://obs-emcsapp-publipng', sort: 1 }, { id:22, name: '团队2', brief: '团队可以是一帮人、 imgUrl: 'https://obs-emcsapp-publipng', sort: 2 }, { id:33, name: '团队3', brief: '团队可以是一帮人、 imgUrl: 'https://obs-emcsapp-publipng', sort: 3 } ] export default { data () { return { hotteams, dragIdx: '' } }, methods: { addTeam (team) { this.hotteams.push(team) }, delTeam (idx) { this.hotteams.splice(idx, 1) }, dragstart (e, index) { this.dragIdx = index }, dragDrop (e, index) { let _teams = this.hotteams //将hotteams存起来 let _dragitem = _teams[this.dragIdx] //将被拖拽的那条数据存起来 _teams.splice(this.dragIdx, 1) //删除被拖拽的那条数据 _teams.splice(index, 0, _dragitem) //将被拖拽的那条数据放到数组中指定的位置 } } } .hotteam{ display: flex; flex-wrap: wrap; justify-content space-between } .nimbus-com-item { width 496px cursor move .font18{ margin-bottom 30px } } .nb-close{ position absolute color #4800FD opacity: 0.26; top 20px right 20px cursor pointer }

【本文地址】

公司简介

联系我们